<template>
    <el-container>
        <!-- 头部 -->
        <el-header>
            <div class="words">
                <span @click="menuClick('adminLayout')">
                    <i class="iconfont icon-r-love" style="font-size: 26px">
                        体检中心管理系统
                    </i>
                </span>
            </div>
            <div class="words">
                <span>欢迎您，<b>{{ userName }}</b>&nbsp;管理员&nbsp;</span>
                <span>
                  <el-button type="danger" size="mini" @click="logout">
                        退出
                  </el-button>
                </span>
            </div>
        </el-header>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="215px">
                <!-- 导航菜单 -->
                <el-menu background-color="white" text-color="grey" active-text-color="black" :default-active="activePath">
                    <el-menu-item index="adminLayout" @click="menuClick('adminLayout')" style="font-size: 20px">
                        <i class="iconfont icon-r-home" style="font-size: 26px">
                        </i>
                        体检中心首页
                    </el-menu-item>
                    <el-menu-item index="checkList" @click="menuClick('checkList')" style="font-size: 20px">
                      <i class="iconfont icon-r-edit" style="font-size: 26px">
                      </i>
                      体检项目管理
                    </el-menu-item>
                    <el-menu-item index="arrangeIndex" @click="menuClick('categoryList')" style="font-size: 20px">
                      <i class="iconfont icon-r-shield" style="font-size: 26px">
                      </i>
                      体检类型管理
                    </el-menu-item>
                    <el-menu-item index="drugList" @click="menuClick('setmealList')" style="font-size: 20px">
                        <i class="iconfont icon-r-love" style="font-size: 26px">
                        </i>
                        体检套餐管理
                    </el-menu-item>

                    <el-menu-item index="bedList" @click="menuClick('orderList')" style="font-size: 20px">
                        <i class="iconfont icon-r-list" style="font-size: 26px">
                        </i>
                        体检预约管理
                    </el-menu-item>
                    <el-menu-item index="patientList" @click="menuClick('reportList')" style="font-size: 20px">
                      <i class="iconfont icon-r-paper" style="font-size: 26px">
                      </i>
                      体检报告管理
                    </el-menu-item>
                    <el-menu-item index="orderList" @click="menuClick('employeeList')" style="font-size: 20px">
                      <i class="iconfont icon-r-user2" style="font-size: 26px">
                      </i>
                      管理员信息管理
                    </el-menu-item>
                </el-menu>
            </el-aside>
           <el-main>
                <!--子路由入口-->
                <router-view>
                    <div></div>
                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import jwtDecode from "jwt-decode";
import { toLoad } from "@/utils/initialize.js";
import {
    getToken,
    clearToken,
    getActivePath,
    setActivePath,
    setUserName,
    getUserName
} from "@/utils/storage.js";
export default {
    name: "Admin",
    data() {
        return {
            userName: "" ,
            activePath: "",
        };
    },
    methods: {
        //导航栏点击事件
        menuClick(path) {
            this.activePath = path;
            setActivePath(path);
            if (this.$route.path !== "/" + path)
              this.$router.push(path);
            console.log(path);
        },
        //退出登录
        logout() {
            this.$confirm("此操作将退出登录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    clearToken();
                    this.$message({
                        type: "success",
                        message: "退出登录成功!",
                    });
                    this.$router.push("login");
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
    },
    mounted() {
        toLoad();
    },
    created() {
        //  获取激活路径
        this.activePath = getActivePath();
        // 解码token
        this.userName = getUserName();
    },
};
</script>
<style scoped lang="scss">
.title {
    cursor: pointer;
}
.el-header {
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid lightgrey;
}
.words {
  text-align: center;
  span {
    color: black;
  }
}
.el-container {
    height: 100%;
}
.el-aside {
    background-color: white;
    border-right: 1px solid lightgrey;
}
.el-menu {
    border: 0;
}
</style>
